<template>
  <view v-if="goodsDetail.goods_name" class="goods_detail_container">
    <!-- 轮播图 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item @click=preview(index) v-for="(item, index) in goodsDetail.pics" :key="index">
        <image :src="item.pics_big" class="swiper-item"></image>
      </swiper-item>
    </swiper>
    <!-- 商品信息 -->
    <view class="goods_info">
      <view class="price">
        ￥{{goodsDetail.goods_price}}
      </view>
      <view class="info">
        <view class="title">{{goodsDetail.goods_name}}</view>
        <view class="favi">
          <uni-icons type="star" size="18" color="grey"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <view class="yf">快递: 免运费</view>
    </view>
    <!-- 商品描述 -->
    <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
    <!-- 底部导航 -->
    <view class="footer">
      <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script>
  import { mapState, mapMutations, mapGetters } from 'vuex'
// import { func } from 'prop-types'
  export default {
    data() {
      return {
       goodsDetail: {},
       	    options: [ {
       			icon: 'shop',
       			text: '店铺',
       		}, {
       			icon: 'cart',
       			text: '购物车',
       			info: 0
       		}],
       	    buttonGroup: [{
       	      text: '加入购物车',
       	      backgroundColor: '#ff0000',
       	      color: '#fff'
       	    },
       	    {
       	      text: '立即购买',
       	      backgroundColor: '#ffa200',
       	      color: '#fff'
       	    }
       	    ]
      }
    },
    computed: {
      ...mapState('cart', ['cartList']),
      ...mapGetters('cart', ['total'])
    },
    
    watch: {
      // total(newVal) {
      //   const listItem = this.options.find(item => item.text === '购物车')
      //   if(listItem) {
      //     listItem.info = newVal
      //   }
      // }
      total: {
        handler(newVale) {
          const listItem = this.options.find(item => item.text === '购物车')
          listItem.info = newVale
        },
        immediate: true
      }
    },
    
    onLoad(optipns) {
      this.getGoodsList(optipns.goods_id)
      // console.log(1)
      // this.backMusic()
    },
    methods: {
      ...mapMutations('cart', ['addToCart']),
      async getGoodsList(id) {
        const {data:{message, meta}} = await uni.$http.get('api/public/v1/goods/detail', {
          goods_id: id
        })
        if(meta.status !== 200) return uni.$showMsg()
        this.goodsDetail = message
        this.goodsDetail.goods_introduce = this.goodsDetail.goods_introduce.replace(/<img /g, '<img style="display: block;"').replace(/.webp/, '.jpg')
      },
      
      onClick(e) {
        if(e.content.text === '购物车') {
          uni.switchTab({
            url: '/pages/cart/cart'
          })
        }
      },
      
      buttonClick(e) {
        if(e.content.text === "加入购物车") {
          this.addToCart({
            goods_id: this.goodsDetail.goods_id,
            goods_name: this.goodsDetail.goods_name,
            goods_price: this.goodsDetail.goods_price,
            goods_count: 1,
            goods_small_logo: this.goodsDetail.goods_small_logo,
            goods_state: this.goodsDetail.goods_state
          })
        }
      },
      
      // backMusic() {
      //   const back = uni.getBackgroundAudioManager()
      //   player()
      //   function player() {
      //     back.title = '此时此刻',
      //     back.src = 'https://636c-cloud1-1gpoxcgr90a432cd-1327466115.tcb.qcloud.la/music.mp3?sign=260b6ac5c32b63445d1e9ba6cc63f2c1&t=1720961670',
      //     back.onEnded(() => {
      //       player()
      //     })
      //   }
      // },
      
      preview(index) {
        uni.previewImage({
          current: index,
          urls: this.goodsDetail.pics.map(item => item.pics_big )
        })
      }
    }
  }
</script>

<style lang="scss">
  // 大盒子
  .goods_detail_container{
    background-color: #fff;
    // height: 100vh;
    padding-bottom: 50px;
  }
  // 轮播图
.swiper {
  height: 750rpx;
  .swiper-item{
    width: 100%;
    height: 100%;
    image{

    }
  }
}
// 商品信息
.goods_info{
  padding: 10px;
  padding-right: 0;
  .price{
    color: #C00000;
    margin: 10px 0;
  }
  .info{
    display: flex;
    .title{
      font-size: 13px;
      margin-right: 10px;
    }
    .favi{
      color: gery;
      width: 120px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-left: 1px solid #dfdfdf;
    }
  }
  .yf{
    margin-top: 10px;
    font-size: 12px;
    color: grey
  }
}

// 底部导航
.footer{
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>
